<template>
	<view class="page-tarbar">
		<view class="page-tarbar-border"></view>
		<view class="page-tarbar-item" :class="{ active: index == 1 }" @click="showIndexPage(1, '/pages/lottery/lottery')">
			<view class="page-tarbar-icon"><img :src="index == 1 ? '/static/img/tabbar/tab1_active.png' : '/static/img/tabbar/tab1.png'" /></view>
			<view class="page-tarbar-label">开奖</view>
		</view>
		<view class="page-tarbar-item" :class="{ active: index == 2 }" @click="showIndexPage(2, '/pages/report/report')">
			<view class="page-tarbar-icon"><img :src="index == 2 ? '/static/img/tabbar/tab2_active.png' : '/static/img/tabbar/tab2.png'" /></view>
			<view class="page-tarbar-label">报表</view>
		</view>
		<!-- #ifndef APP-PLUS -->
		<view class="page-tarbar-item lotter" :class="{ active: index == 3 || index == -1 }" @click="showIndexPage(3, home)">
			<view class="page-tarbar-icon">
				<view class="img-c"><img :src="index == 3 || index == -1 ? '/static/img/tabbar/tab3_active.png' : '/static/img/tabbar/tab3.png'" /></view>
			</view>
			<view class="page-tarbar-label">{{isLotter?'大厅':'彩票'}}</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="page-tarbar-item" :class="{ active: index == 3 || index == -1 }" @click="showIndexPage(3, home)">
			<view class="page-tarbar-icon">
				<view class="img-c"><img src="/static/img/tabbar/blank.png" /></view>
			</view>
			<view class="page-tarbar-label">{{isLotter?'大厅':'彩票'}}</view>
		</view>
		<!-- #endif -->
		<view class="page-tarbar-item" :class="{ active: index == 4 }" @click="showIndexPage(4, '/pages/recharge/recharge')">
			<view class="page-tarbar-icon"><img :src="index == 4 ? '/static/img/tabbar/tab4_active.png' : '/static/img/tabbar/tab4.png'" /></view>
			<view class="page-tarbar-label">提现充值</view>
		</view>
		<view class="page-tarbar-item" :class="{ active: index == 5 }" @click="showIndexPage(5, '/pages/my/my')">
			<view class="page-tarbar-icon"><img :src="index == 5 ? '/static/img/tabbar/tab5_active.png' : '/static/img/tabbar/tab5.png'" /></view>
			<view class="page-tarbar-label">菜单</view>
		</view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
export default {
	name: 'Tabbar',
	data() {
		return {
			index: this.indexpage,
			home:Config.is3rd?'/pages/home/home3rd':'/pages/home/home'
		};
	},
	props: {
		indexpage: {
			type: Number,
			default: -1
		},
		isLotter:{
			type:Boolean,
			default:false
		}
	},
	mounted() {
		uni.hideTabBar();
	},
	methods: {
		setIndex(index) {
			if (Tools.isEmpty(this.indexpage)) {
				this.index = index;
			}
		},
		showIndexPage(index, pageName) {
			console.log("提现充值：",index);
			if (this.$store.state.tabbar_now_index == index) {
				return;
			}
			uni.$emit('clearMenuTimer');
			uni.$emit('isClearTimeOut', { isClear: true });
			if (index == 3 || index == '3') {
				uni.$emit('startMenuTimer');
				uni.$emit('isClearTimeOut', { isClear: false });
			}
			this.$store.commit('setTabbarIndex', index);
			let isLogin = VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY);
			if (!Tools.isEmpty(isLogin) && (isLogin == '1' || isLogin == 1)) {
				this.setIndex(index);
				uni.switchTab({
					url: pageName
				});
				return;
			}

			this.isLogin(index, pageName);
		},
		isLogin(index, pageName) {
			let that = this;
			Net.ayiHttp(
				URL.USER_TOKEN,
				'',
				function(res) {
					console.log('success:', res);
					//已经登陆的处理逻辑
					if (res.code != Config.LOGIN_CODE) {
						VueTools.setStorageSync(Config.IS_LOGIN_STORE_KEY, '1');
						that.setIndex(index);
						uni.switchTab({
							url: pageName
						});
					} else {
						VueTools.removeStorageSync(Config.IS_LOGIN_STORE_KEY);
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
						// that.$store.commit("setTabbarIndex",3);
						// uni.switchTab({
						// 	url: "/pages/home/home"
						// });
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.page-tarbar {
	height: 50px;
	width: 100%;
	display: flex;
	position: fixed;
	bottom: 0rpx;
	background: #ffffff;
	.page-tarbar-border {
		height: 1px;
		background: rgba(0, 0, 0, 0.33);
		position: absolute;
		top: 0px;
		width: 100%;
		transform: scaleY(0.5);
		left: 0px;
	}
	.page-tarbar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.page-tarbar-icon {
			width: 27px;
			height: 24px;
			position: relative;
			padding-top: 4px;
			display: flex;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.page-tarbar-label {
			font-size: 10px;
			color: rgb(140, 140, 140);
			line-height: 1.8;
		}
		&.lotter {
			.page-tarbar-icon .img-c {
				position: absolute;
				width: 37px;
				height: 37px;
				top: -20px;
				left: -10px;
				border-radius: 50%;
				background: #fff;
				border: 5px solid #fff;
				box-shadow: 0 -2px 3px rgba(100, 100, 100, 0.4);
				display: flex;
			}
		}
		&.active {
			.page-tarbar-label {
				color: red;
			}
		}
	}
}
</style>
